<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—宠物知识</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../CSS/PetKnowledge.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
        <!-- mask登录需要作为背景强调登陆框 -->
        <div class="mask"></div>
            <div class="logo">宠物收容所</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="AdoptionCenter.html">领养中心</a></li>
                <li  class="current"><a href="PetKnowledge.html">宠物知识</a></li>
                <li><a href="TeamActivities.html">团队活动</a></li>
                <li><a href="BeVolunteer.html">成为志愿者</a></li>
                <li><a href="Donate.html">捐助</a></li>
            </ul>
            <div  class="nav-login" v-show="user_id">
            <div class="Avater">
                <ul>
                <li><img :src="logginMessage.user_avater_url" alt=""></li>
                <li><div>{{this.logginMessage.userlogin_name}}</div></li>
                <li><div><a href="userCenter.html" style="color: #fff;">用户中心</a></div></li>
                <li @click="outLogin">退出登录</li>
                </ul>
            </div>
            </div>
    
    
    
    
            <div class="nav-login" v-show="!user_id" @click="Loginhandle">
                <ul>
                    <li><a 
                        style="color: #fff;"
                        href="javascript:;">
                        <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                    </a></li>
                    <li><a 
                        style="color: #fff;"
                        href="javascript:;">登录/注册</a></li>
                </ul>
            </div>
    
            <div class="login-box">
            <div class="Login">
                <div class="owl" id="owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
            <form action="">
                <div>
                    <span class="iconfont icon-yonghu"></span>
                    <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
                </div>
                <div>
                    <span class="iconfont icon-ttubiao_password"></span>
                    <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
                </div>
                
                <!-- <button @click="loginButton">提交</button> -->
                <span @click="loginButton" style="color: #fff;
                background-color: #20b2aa;
                height: 50px;
                width: 150px;
                text-align: center;
                font-size: 1.2rem;
                line-height: 50px;
                border-radius: 3px;
                ">提交我</span>
            </form>
            <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
    
            <div class="Register"  style="display: none;">
    
                <div class="owl" id="reowl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
                <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
                <el-row>
                <el-col>
                    <el-form 
                    status-icon 
                    :inline="true" 
                    label-width="0px" 
                    :model="registerMessage" 
                    ref="registerMessage" 
                    class="demo-ruleForm" 
                    :rules="rules" 
                    
                    >
                        <div>
                            <span class="iconfont icon-email"></span>
                            <el-form-item label="" prop="user_email">
                            <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dianhua"></span>
                            <el-form-item label="" prop="user_phone">
                            <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <span class="iconfont icon-yonghu"></span>
                            <el-form-item label="" prop="user_name">
                                <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dizhi"></span>
                            <el-form-item label="" prop="user_address">
                                <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                            </el-form-item>
                        
                        </div>
                        <div>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password">
                            <el-input placeholder="密码" 
                            autocomplete="off" 
                            id="registerpass1" 
                            v-model="registerMessage.user_password" 
                            type="password" 
                            show-password
       
                            ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password_again">
                            <el-input placeholder="再次输入密码" 
                            autocomplete="off" 
                            id="registerpass" 
                            v-model="registerMessage.user_password_again" 
                            type="password" 
                            show-password
                            
                            
                            ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-input
                            style="
                            height: 10vh;
                            "
                            type="textarea"
                            placeholder="介绍一下自己吧"
                            v-model="registerMessage.user_info"
                            maxlength="60"
                            show-word-limit
                            style="font-size: 1.5rem;
                                height: 15vh;
                            "
                            >
                            </el-input>
                        </div>
                        <div style="color: #000;">
                            <template>
                            是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                            <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                            </template>
                        </div>
            <div style="color: #000;
            border: 1px #ccc solid;
            ">
            
            <el-upload
                class="upload-demo"
                drag
                action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                name="imgFile"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                multiple 
                
                >
                <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
                <i v-else class="el-icon-upload"
                style="
                    font-size: 67px;
                    color: #C0C4CC;
                    margin: 16px 0 16px;
                    line-height: 50px;
                "
                >
                <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </i>
                
            </el-upload>
            </div>
            
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerMessage')"
                        style="width: 15vw;"
                    >提交</el-button>
                    <el-button @click="resetForm('registerMessage')"
                        style="width: 15vw;"
                    >重置</el-button>
                </el-form-item>
            </div>
    
                    </el-form>
                </el-col>
                </el-row>
                <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
            </div>
             <div class="burger">
                 <div class="top-line"></div>
                 <div class="middle-line"></div>
                 <div class="bottom-line"></div>
             </div>
    </nav>
    <!-- 网页内容 -->

        <!--------------------遮罩层-------------------------------->
        <div class="knowledge-box">
            <div class="item">
                <div class="info">
                    <h1>养狗须知</h1>
                    <p>狗狗刚进入新环境时会很不安，<br>此时主人要为它打造一个温暖的居所。<br>可以用自己不要的旧衣服放在狗狗窝里，<br>这样既能保暖也能让狗狗熟悉你的气味。
                        <br>每天保持一定的运动量。<br>每个狗狗都需要一定的运动量来保持健康的状态，<br>但是在没有打疫苗之前<br></a>尽量不要带狗狗去到比较不安全的地方。<br><br><a href="#">日常生活</a></p>
                </div>
            </div>
            <div class="item">
                <div class="info" id="infoSecond">
                    <h1>养狗须知</h1>
                    <p>要注意好狗狗的饮食变化，<br>尽量每日准时喂食，<br>根据体型和年龄选择搭配好<br>营养均衡的餐食，<br>并每天准备好每公斤体重60毫升的饮用水。<br>
                        两三个月以下的狗狗肠胃比较脆弱，<br>所以狗粮需要泡过才能喂食，<br>并且尽量少吃多餐，<br>一天可以喂三到四次。<br><br><a href="#">狗狗的饮食</a></p>
                        
                
                </div>
            </div>
            <div class="item">
                <div class="info">
                    <h1>养猫须知</h1>
                    <p>要注意猫咪的饮食。<br>刚出生几周的猫咪最好喂食羊奶粉，<br>四到八周的猫咪<br>可以用羊奶粉泡一些猫粮，<br>八周多大的猫咪就可以直接喂猫粮了。<br>但是主人要注意<br>尽量不要将人吃的食物随便喂给猫咪。<br><br><a href="#">猫咪的饮食</a></p>
                </div>
            </div>
            <div class="item">
                <div class="info">
                    <h1>养猫须知</h1>
                    <p>养猫前要准备好的猫咪用品，<br>包括但不限于食盆，猫砂和猫砂盆。<br>一定要注意猫咪的卫生，<br>培养猫咪上猫砂盆的习惯，<br>猫咪的窝需要定期杀菌消毒，<br>并且按时给猫咪洗澡，<br>每年还需要给猫咪打疫苗，<br>只有这样我们的猫咪才可以健康生长。<br><br><a href="#">日常生活</a></p>
                </div>
            </div>   
        </div>
    
    
        <!-------------NEWS-------------------------------------->
        <div class="news-holder">
        <h1>宠物知识</h1>
    
        <div class="news-holder cf">
    
            <ul class="news-headlines">
            <li class="selected">广州市养宠政策</li>
            <li>猫狗可以上地铁吗</li>
            <li>猫猫得猫藓的处理方式</li>
            <li>如何帮助宠物适应新的环境</li>
            <li>如何判断宠物是否生病</li>
            <li>饮食禁忌</li>
            </ul>
    
            <div class="news-preview">
    
            <div class="news-content top-content">
                <img src="../images/homeless1.jpg">
                <p><a href="https://www.gd.gov.cn/zwgk/wjk/zcfgk/content/post_2531899.html">点击查看详情</a></p>
            </div>
    
            <div class="news-content">
                <img src="../images/know1.jpg">
                <p><a href="#">猫狗可以上地铁吗</a></p>
    
                <p>不可以！无论是宠物猫还是宠物狗，都是不能上地铁的，之所以有这种规定主要是这两个原因，一个原因是为了保障乘客的安全，一个原因是为了车厢内的秩序，所以按规定来讲，宠物是不能上地铁的。
                    地铁的进站口有“禁止携带宠物”的标示，而地铁公告栏上也明确规定：禁止携带活禽以及猫、狗（导盲犬除外）等宠物。</p>
            </div>
    
            <div class="news-content">
                <img src="../images/know2.jpg">
                <p><a href="#">猫猫得猫藓的处理方式</a></p>
    
                <p>猫藓具有传染性，如果范围较小可以在家自行处理。先清理感染部位，已发生脱毛现象的可以戴着手套直接拔出感染部位的猫毛（防止感染自己），
                    使猫咪皮肤裸露出来，再用棉签沾酒精或碘酒擦拭消毒，然后喷皮特芬等水剂药。喷涂的治疗方式不好的地方在于猫会舔舐药物，所以在给猫咪上药之后，要及时给它戴上脖圈防止舔舐。
                    待药物吸收后再解开脖圈即可，不必长期佩戴影响猫咪活动。</p>
            </div>
    
            <div class="news-content">
                <img src="../images/know3.jpg">
                <p><a href="#">如何帮助宠物适应新的环境</a></p>
    
                <p>狗刚刚到了一个新的环境，非常不熟悉可能会因为恐惧而大叫，尤其是晚上睡觉的时候这个时候家长应该给狗狗准备足够的饮水和食物给它温暖舒适的小窝，把窝放在你随时能看到的地方这样可以减少狗狗的恐惧如果它开始不安的嚎叫，
                    那么家长也不要一直去安慰几天之后狗狗熟悉了自然就好了。小猫到达新家之后，它对周围的环境都陌生的，内心也充满了不安，因此小猫刚来的时候不要总是抱它，抚摸它，先让它自由地在家里巡视一番，没有危险就不要管它，
                    让它自由地活动，在一旁观察它的情况，直到小猫慢慢熟悉新环境。猫咪刚到第一天，一定要带猫咪去正确的地方上厕所，一定要让猫咪知道吃饭的地方和去厕所的地方，让猫咪记住猫砂盆的位置。</p>
            </div>
    
            <div class="news-content">
                <img src="../images/know4.jpg">
                <p><a href="#">如何判断宠物是否生病</a></p>
    
                <p>如果宠物出现以下症状建议及时送医！
                    1.精神沉郁懒动，食欲比平时减退，躲在阴暗角落，嗜睡；<br> 
                    2.频繁饮水，嗷叫；<br>             
                    3.12小时内两次以上呕吐；<br>            
                    4.粪便稀软带血；<br>            
                    5.触摸犬、猫体表时出现疼痛感，或对主人的抚摸发怒；<br>            
                    6.行走异常，步态不稳或瘸行；<br>        
                    7.频繁摇头或用前、后肢不停地抓挠身体固定部位；<br>           
                    8.流鼻涕或眼泪，鼻镜干燥，鼻端色泽异常；<br>           
                    9.间歇性抽搐痉挛，伴有泡沫性呕吐、倒卧等症状；<br>            
                    10.嗜食异物、杂物</p>
            </div>
    
            <div class="news-content">
                <img src="../images/know5.jpg">
                <p><a href="#">饮食禁忌</a></p>
    
                <p>1.盐及含盐食物<br>
                2.木糖醇<br>
                3.巧克力<br>
                4.洋葱、香葱、蒜<br>
                5.牛奶<br>
                6.生肉</p>
            </div>
            </div>
        </div>
        </div>


    <!-- 网页内容设计结束 -->
        

    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>
        
        
<script src="../JS/PetKnowledge.js"></script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 